<template>
  <div :class="['i-cascader', { 'back-stage': backStage }]">
    <InputLabel v-if="label" :text="label" :required="required" :backStage="backStage" />
    <Cascader
      v-bind="$attrs"
      v-on="$listeners"
      :class="cls"
      :style="style"
      :clearable="clearable"
    />
  </div>
</template>

<script>
import { inputMixin } from "./mixin/inputMixin";
// @group iview
export default {
  name: "IviewCascader",
  mixins: [inputMixin],
  props: {
    // 标签
    label: {
      type: String,
    },
    // 是否使用后台样式
    backStage: {
      type: Boolean,
    },
    // 是否必填，传入label时才有效
    required: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
@import "./config/input";
.i-cascader {
  .input-layout();
  /deep/.ivu-cascader {
    position: relative;
    .input-width();
    // 输入框
    .ivu-cascader-rel {
      .ivu-input-wrapper {
        .ivu-input {
          .input-placeholder;
          .input-view();
          .input-height();
          .input-text();
          &.ivu-input-disabled {
          }
        }
      }
      .ivu-cascader-label {
        color: @input-text-color;
      }
      .ivu-cascader-arrow {
        color: #808695 !important;
      }
    }
    // 下拉框
    .ivu-select-dropdown {
      .input-drawdown-view();
      // 级联菜单
      .ivu-cascader-menu {
        .input-show-scroll();
        border-right: @input-drawdown-inner-border;
        .ivu-cascader-menu-item {
          color: @input-drawdown-item-text;
          .ivu-icon {
            top: 55%;
          }
          &:hover {
            color: @input-drawdown-item-text-hover;
            background: @input-drawdown-item-bg-hover;
          }
          &.ivu-cascader-menu-item-active {
            color: @input-drawdown-item-text-active;
            background: @input-drawdown-item-bg-active;
          }
          &.ivu-cascader-menu-item-disabled {
            color: @input-drawdown-item-text-disabled;
          }
        }
      }
      // 暂无匹配数据
      .ivu-cascader-not-found-tip {
        padding: 5px 10px;
      }
    }
  }
}
</style>
